<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>簡歷</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="float: right; margin-right: 200px;" onclick="add()">
    新增簡歷
</button>

<table class="table">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">姓名</th>
        <th scope="col">地址</th>
        <th scope="col">電話</th>
        <th scope="col">編輯</th>
        <th scope="col">刪除</th>
    </tr>
    </thead>
    <tbody id="body">
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label >id</label>
                        <input id="formId" type="text" class="form-control" placeholder="id" value="">
                    </div>
                    <div class="form-group">
                        <label >姓名</label>
                        <input id="formName" type="text" class="form-control" placeholder="姓名" value="趙六">
                    </div>
                    <div class="form-group">
                        <label >地址</label>
                        <input id="formAddr" type="text" class="form-control"  placeholder="地址" value="南京">
                    </div>
                    <div class="form-group">
                        <label >電話</label>
                        <input id="formPhone" type="text" class="form-control" placeholder="電話" value="154000000">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="submitBtn">送出</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var resumes;
    $.get("/resume/findAll", function (result) {
        resumes = eval(result);
        console.dir(resumes)
        var str = "";
       for (i in resumes) {
           str += "<tr>" +
               "<td>" + resumes[i].id + "</td>" +
               "<td>" + resumes[i].name + "</td>" +
               "<td>" + resumes[i].address + "</td>" +
               "<td>" + resumes[i].phone + "</td>" +
               "<td><button type='button' class='btn btn-primary' onclick='update(" + i + ")'>編輯</button></td>" +
               "<td><button type='button' class='btn btn-primary' onclick='del(" + resumes[i].id + ")'>刪除</button></td>" +
               "</tr>";
       }
        document.getElementById("body").innerHTML = str;
    })

    document.getElementById("submitBtn").onclick = function () {
        $.post("/resume/save", {
            id: $("#formId").val(),
            name: $("#formName").val(),
            address: $("#formAddr").val(),
            phone: $("#formPhone").val(),
        })
        location.reload();
    }

    function add() {
        $("#formId").val("");
    }

    function update(index) {
        console.dir(index)
        $("#formId").val(resumes[index].id);
        $("#formName").val(resumes[index].name);
        $("#formAddr").val(resumes[index].address);
        $("#formPhone").val(resumes[index].phone);
        $('#myModal').modal('show')
    }

    function del(id) {
        $.get("/resume/del", {id : id});
        location.reload();
    }
</script>